<template>
    <div class="song-type">
        <ul class="song-type-tags">
            <li class="song-type-tags-item" v-for="(tag,index) in menuTags.tags" :key="index" v-if="tag.group!=='热门'" >
                <div class="item-title">{{tag.group}}</div>
                <!--处理语种的样式-->
                <ul class="item-type" v-if="index===1">
                    <!--当前类型点击后被选中，同时只遍历前5种类型-->
                    <li class="item-name" :class="{select:categoryId===item.id}" v-for="(item,index2) in tag.items" :key="index2" v-if="index2<5" @click="getTypeId(item.id,item.name,index,index2)">
                      {{item.name}}
                    </li>
                    <!--点击更多遍历剩余的类型，ref来控制装有剩余类型的容器的显示与隐藏-->
                    <li class="item-name item-more" ref="more" v-show="tag.items.length>=5">
                      <span @click="showMore(index)" class="">
                        更多<span class="iconfont icon-xiangxia"></span>
                      </span>
                      <div class="item-name-other">
                        <span :class="{select:categoryId===item.id}" v-for="(item,index2) in tag.items"  :key="index2" v-if="index2>=5" @click="getTypeId(item.id,item.name,index,index2)">{{item.name}}</span>
                      </div>
                    </li>
                </ul>
                <!--处理其他的样式-->
                <ul class="item-type" v-else>
                  <li class="item-name" :class="{select:categoryId===item.id}" v-for="(item,index2) in tag.items" :key="index2" v-if="index2<8" @click="getTypeId(item.id,item.name,index,index2)">
                    {{item.name}}
                  </li>
                  <li class="item-name item-more" ref="more" v-show="tag.items.length>=8">
                      <span @click="showMore(index)">
                       更多<span class="iconfont icon-xiangxia"></span>
                      </span>
                    <div class="item-name-other">
                      <span :class="{select:categoryId===item.id}" v-for="(item,index2) in tag.items" :key="index2" v-if="index2>=8" @click="getTypeId(item.id,item.name,index,index2)">{{item.name}}</span>
                    </div>
                  </li>
              </ul>
            </li>
        </ul>
        <!--显示类型的名字，同时全部类型和其他类型的样式不同，采用v-if v-else的方式来解决-->
        <div class="type-title clearfix">
            <div class="left">
              <span class="all-list" v-if="categoryId===10000000">{{typeName}}</span>
              <span class="other-list" v-else>
                {{typeName}}
                <span class="iconfont icon-cuowu" @click="withdraw"></span>
              </span>
            </div>
            <ul class="right">
                <li :class="{select:sortId===item.id}" @click="getSortId(item.id)" v-for="(item,index) in menuTags.all_sorts" v-if="index<2">{{item.name}}</li>
            </ul>
        </div>
        <!--歌单歌曲的列表显示，list中存放所有的歌单歌曲-->
        <ul class="song-list-info">
        <li v-for="(item,index) in list" :key="index">
          <div class="img" @click="toMenuDetail(item.diss_id)">
            <img :src="item.menu_pic" alt="">
            <div class="icon">
              <span class="iconfont icon-bofang1"></span>
            </div>
          </div>
          <div class="name ellipsis" @click="toMenuDetail(item.diss_id)">{{item.diss_name}}</div>
          <div class="content">{{item.creator_name}}</div>
          <div class="date">{{item.commit_time}}</div>
        </li>
      </ul>
      <!--点击加载更多的歌单歌曲-->
      <div @click="loadingMore" ref="loading" class="loading">点击加载更多...</div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "SongType",
        data(){
          return{
            categoryId:10000000,//初始化歌单类型id
            typeName:'全部歌单',//初始化歌单类型名
            sortId:2,//默认选中最热  (最新，最热)
            sin:0,//从0开始
            currentCount:19,//默认开始为20首
            list:[],//初始化歌单列表
          }
        },
        computed:{
          ...mapState(['menuTags','menuList']),
        },
        methods:{
          //1、点击更多，控制更多类型的显示与隐藏，bug:刷新之后，点击两次才会show
          //解决了点击两次才显示的问题，主要是more的dispaly值取的是空。
          showMore(index){
            for(let i=0;i<this.$refs.more.length;i++){
              if(i===index-1){
                if(this.$refs.more[i].children[1].style.display===''||this.$refs.more[i].children[1].style.display==='none'){
                  this.$refs.more[i].children[1].style.display='block';
                  this.$refs.more[i].className="item-name item-more select-more"
                }else{
                  this.$refs.more[i].children[1].style.display='none';
                  this.$refs.more[i].className="item-name item-more"
                }
                this.$refs.more[i].children[1].style.color='black';
              }else{
                this.$refs.more[i].children[1].style.display='none';
              }
            }
          },
          //2、点击获取当前的类型id
          getTypeId(id,name,index,index2){
              this.categoryId=id;
              this.typeName=name;
              this.sin=0;
              this.currentCount=19;
              this.list=[];
              for(let i=0;i<this.$refs.more.length;i++){//遍历所有的more，并初始化其样式
                this.$refs.more[i].children[1].style.display='none';
                this.$refs.more[i].className='item-name item-more';
              }
              //两种情况讨论，在点击更多里的类型和外面的类型进行样式处理
              if(index===1){
                  if(index2>=5){
                    this.$refs.more[index-1].children[1].style.display='block';
                  }
              }else{
                  if(index2>=8){
                    this.$refs.more[index-1].children[1].style.display='block';
                  }
              }
          },
          //3、点击获取当前分类的状态 最新/最热
          getSortId(id){
            this.sortId=id;
            this.sin=0;
            this.currentCount=19;
            this.list=[];
          },
          //4、点击删除按钮，还原到刷新状态
          withdraw(){
            this.categoryId=10000000;
            this.typeName='全部歌单';
            this.list=[];
            for(let i=0;i<this.$refs.more.length;i++){
                this.$refs.more[i].children[1].style.display='none';
            }
          },
          //5、点击加载更多的图片
          loadingMore(){
            this.sin=this.currentCount+1;
            this.currentCount+=20;
          },
          toMenuDetail(id){
            this.$router.replace('/menudetail/'+id);
          }
        },
        mounted(){
            //初始状态显示图片列表
            this.$store.dispatch('getMenuList',{categoryId:this.categoryId,sortId:this.sortId,sin:this.sin,ein:this.currentCount})
        },
        watch:{
          categoryId(value){
            this.$store.dispatch('getMenuList',{categoryId:value,sortId:this.sortId,sin:this.sin,ein:this.currentCount})
          },
          sortId(value){
            this.$store.dispatch('getMenuList',{categoryId:this.categoryId,sortId:value,sin:this.sin,ein:this.currentCount})
          },
          currentCount(value){
            this.$store.dispatch('getMenuList',{categoryId:this.categoryId,sortId:this.sortId,sin:this.sin,ein:value})
          },
          menuList(value){
            if(this.list.length){
              if(value.length){
                value.forEach(item=>{
                  this.list.push(item)
                })
              }else{
                this.$refs.loading.style.display='none';
              }
            }else{
              this.list=value;
            }
            // console.log(this.list);
          }
        }
    }
</script>

<style scoped lang="less">
.song-type{
  background:linear-gradient(to bottom,#f2f2f2,#fafafa);
  .song-type-tags{
    position: relative;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    margin: 20px auto;
    width: 1200px;
    .song-type-tags-item{
      flex: 3;
      padding: 30px 20px 30px 0px;
      .item-title{
        margin-bottom: 15px;
        color: #999;
        margin-left: 20px;
      }
      .item-type{
        border-right: 1px solid #ddd;
        .item-name{
            text-align: center;
            display: inline-block;
            width: 30%;
            padding: 10px 0px;
          &.item-more{
            margin-left: -4px;
            &.select-more{
              background-color: #31c27c;
              color: white;
              padding-bottom: 8px;
              &:hover{
                color:white;
                cursor: pointer;
              }
            }
            >div{
              >span{
                  &:hover{
                    color: #31c27c;
                    cursor: pointer;
                  }
                }
            }
          }
          &:hover{
            color: #31c27c;
            cursor: pointer;
          }
        }
        .select{
          background-color: #31c27c;
          color: white;
          &:hover{
            color: white;
          }
        }
      }
      &:first-child{
        flex: 2;
        .item-type{
          .item-name{
            width: 48%;
          }
        }
      }
      .item-name-other{
        position: absolute;
        background-color: white;
        left: 13px;
        bottom: -20px;
        line-height: 50px;
        height: 50px;
        width: 1200px;
        padding: 0px 16px;
        border-radius: 5px;
        box-shadow: 1px 1px 10px #ccc;
        display: none;
        text-align: left;
        box-sizing: border-box;
        >span{
          margin-right: 15px;
          padding: 10px 10px;
          &.select{
            &:hover{
              color: white !important;
            }
          }
        }
      }
    }
  }
  .type-title{
    width: 1200px;
    margin:0px auto 15px;
    height: 40px;
    line-height: 40px;
    .left{
      margin-left: 20px;
      float: left;
       .all-list{
         font-size: 25px;
      }
       .other-list{
         font-size: 14px;
         border: 1px solid #ccc;
         padding: 10px;
         &:hover{
           background-color: #31c27c;
           color: white;
           >span{
             &:hover{
               width: 16px;
               height: 16px;
               border-radius: 50%;
               background-color: rgba(0, 0, 0, 0.1);
               line-height: 19px;
               display: inline-block;
             }
           }
         }
       }

    }
    .right{
      font-size: 14px;
      border: 1px solid #ccc;
      margin-right: 20px;
      float: right;
      display: flex;
      flex-direction: row;
      >li{
          flex: 1;
          padding:0px 10px;
          &.select{
            background-color: #31c27c;
            color: white;
          }
      }
    }
  }
  .loading{
    width: 400px;
    height: 40px;
    margin: 15px auto;
    text-align: center;
    line-height: 40px;
    color: white;
    background: #31c27c;
    border-radius: 5px;
    font-size: 14px;
  }
}
.song-type .song-list-info{width: 1200px;margin: 0 auto;text-align: left;padding-left: 20px;}
.song-type .song-list-info li{margin-bottom:32px;font-size:14px;display: inline-block;width: 222px;margin-right: 17px;position: relative;}
.song-type .song-list-info li:nth-child(5n){margin-right: 0px;}
.song-type .song-list-info li img{width: 226px;height: 222px;display: block;cursor: pointer;transition: all 0.6s;}
.song-type .song-list-info li .name{margin-top: 19px;margin-bottom: 10px;}
.song-type .song-list-info li .content{color: #999;}
.song-type .song-list-info li .content:hover{cursor: pointer;color: #31c27c}
.song-type .song-list-info li .name:hover{cursor: pointer;color: #31c27c;}
.song-type .song-list-info li .date{margin-top:10px;color: #999;}
.song-type .song-list-info li .img:hover::after{content: '';display: block;width: 222px;height: 222px;position: absolute;top:0;left: 0;background: #000;opacity: 0.2;}
.song-type .song-list-info li .img{width: 222px;height: 222px;overflow: hidden;}
.song-type .song-list-info li .img:hover img{transform: scale(1.2);}
.song-type .song-list-info li .icon{position: absolute;z-index: 1;background: white;border-radius: 50%;height:40px;width: 40px;text-align: center;line-height: 40px;opacity: 0;transition: all 1s;top:30%;right: 0;left: 0;margin: 0 auto}
.song-type .song-list-info li .img:hover .icon{opacity: 1;transform: scale(1.3);}
.song-type .song-list-info li .iconfont{font-size: 25px;color: #545454;margin-left: 4px;margin-top: 3px;display: inline-block;}
</style>
